<template>
  <view>
    <view class="mask-home-img-container" :class="{ 'mask-home-img-fade-out': !showMask && animating }"
      v-if="showMask || animating" @tap="closeMask">
      <view class="mask-home-img-content" :class="{ 'mask-home-img-content-fade-out': !showMask && animating }"
        @tap.stop>
        <image src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734055550675b967e64535.png"
          mode="widthFix" class="mask-home-img-promo" @click="toNewYearSpecial" />
        <view class="feiIconfont icon-airline_close mask-home-img-close-btn" @tap="closeMask"></view>
      </view>
    </view>

    <qh-tabbar-page-view :showNavbar="false" bgColor="var(--primary-color)">
      <scroll-view scroll-y="true" @scroll="handleScroll" @scrolltolower="handleScrollToLower"
        style="height: 100vh;background-color: #FDF8EE;" :lower-threshold="50">
        <view class="fixed-header">
          <view style="position: relative; padding-bottom: 970rpx; z-index: 999">
            <view class="background-carousel-container">
              <swiper :autoplay="true" interval="3000" :circular="true" :indicator-dots="false"
                indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffff" :previous-margin="margin"
                :next-margin="margin">
                <swiper-item v-for="(item, index) in bannerList" :key="index" class="background-swiper-item">
                  <image :src="item.image_url" mode="aspectFill" class="background-swiper-image"></image>
                </swiper-item>
              </swiper>
            </view>
            <view :class="['sticky-header', { sticky: isSticky }]" :style="headerStyle">
              <uni-status-bar></uni-status-bar>
              <view style="
                  text-align: left;
                  font-weight: 550;
                  padding: 0 32rpx;
                  height: 88rpx;
                  line-height: 88rpx;
                  font-size: 40rpx;
                ">
                <img style="width: 370rpx; height: 68rpx" :src="!isTop
                  ? 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667b83489f37d9269.png'
                  : 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a8e70489f07484.png'
                  " alt="" />
              </view>

              <view style="
                  display: flex;
                  justify-content: space-between;
                  padding: 24rpx;
                ">
                <view style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  ">
                  <view @click="getLocal" style="
                      background-color: #fff;
                      width: 180rpx;
                      height: 100%;
                      border-radius: 16px;
                      display: flex;
                      align-items: center;
                      border: 1px solid #f5f5f5;
                    ">
                    <text style="font-size: 16px; margin: 0px 0px 0px 5px"
                      class="qh-rt-single qh-rt-weizhi2 choose-position-icon"></text>
                    <text class="address_ellipsis">{{ userPosition }}</text>
                  </view>
                </view>

                <view style="width: 100%" class="search-box flex-cn" @click="toSearchGoods">
                  <text class="qh-rt-single qh-rt-a-zu2432 search-icon"></text>
                  <text class="search-text">请输入商品名称</text>
                  <view class="search-button">搜索</view>
                </view>
              </view>
            </view>

            <view style="width: 100%; position: absolute; left: 0; bottom: 0px">
              <view style="
                  height: 1100rpx;
                  background: linear-gradient(179deg,#ffffff 0%,#ffe3b6 41%,#ffc058 100%);
                ">
                <view class="xzt-icon-grid">
                  <img style="width: 100%; height: 30rpx"
                    src="https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-04-27/680da2c6b788d2281.png"
                    alt="" />
                  <view style="
                      margin-top: 16rpx;
                      display: grid;
                      grid-template-columns: 1fr 1fr;
                      gap: 20rpx;
                    ">
                    <img v-for="(item, index) in classTwo" :key="index" style="width: 348rpx; height: 272rpx"
                      :src="item.image_url" alt="" @click="handlerClass(item)" />

                    <!-- <img style="width: 348rpx; height: 272rpx"
                      src="https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-04-27/680da73e060f79364.png"
                      alt="" /> -->
                  </view>
                </view>

                <view class="xzt-activity">
                  <view style="position: relative;height: 740rpx;width: 100%;">
                    <img style="width: 100%; height: 100%;position: absolute;left: 0; top: 0;"
                      src="https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-04-28/680f37b683c1f3897.png"
                      alt="" />

                    <view class="xzt-save-money">
                      <view class="xzt-gezi">
                        <image v-for="(item, index) in classSix" :key="index" @click="handlerClass(item)"
                          style="width: 214rpx; height: 278rpx;border-radius: 12rpx;" :src="item.image_url"
                          mode="aspectFill">
                        </image>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>


          </view>
        </view>

        <view style="background: linear-gradient( 359deg, #FFC058 0%, #FBFEF8 100%), #D8D8D8;padding: 10rpx;">
          <view  style="position: relative;height: 520rpx;width: 100%;">
            <img @click="toClassIcon" style="width: 100%; height: 490rpx;position: absolute;left: 0; top: 0;"
              src="https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-05-24/6831766f197f54661.png" alt="" />
            <view class="xzt-pinpai">
              <view class="trendMark-for" v-for="(item,index) in Product" :key="index">
                <view class="trendMark-content">
                  <!-- <view class="trendMark-table">
                    <view style="" class="trendMark-jiantou">两件立省</view>

                    <image class="trendMark-table"
                      src="https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-04-27/680deffe3d5153869.png"
                      mode="aspectFill"></image>
                  </view> -->

                  <image class="trendMark-image"
                    :src="item.goods_image"
                    @click="toDetail(item.id)"
                    mode="aspectFill"></image>
                </view>
                <view class="pinpai-text">{{ item.goods_name }}</view>
                <view class="pinpai-button">
                  <view
                    style="height: 30rpx;width: 72rpx;border-radius: 196rpx;background-color: #FFB73F;color: #fff;font-size: 20rpx;text-align: center;">
                    到手价</view>
                  <view style="height: 40rpx;width: 102rpx;">
                    <text style="font-size: 30rpx;">{{item.online_price}}</text>
                    <!-- <text style="font-size: 22rpx;">/2套</text> -->
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>


        <view class="priority-recommend">
          <text class="hot-sales" style="font-size: 36rpx; position: relative;left: 20rpx;font-weight: bold;">热卖精选</text>
          <!-- <view style="font-size: 24rpx;display: flex;justify-content: center;align-items: center;">
            <text style="margin-right: 10rpx;">更多</text>
            <text class="qh-rt-single qh-rt-a-zu4425 right-icon" style="font-size: 24rpx;"></text>
          </view> -->
        </view>

        <view class="home_class">
          <waterfallsFlow ref="WaterfallRef" :alertToggle="alertToggle" @updateSKU="generateSKU" :wfList="goodsList"
            :updateNum="goodsPage"></waterfallsFlow>
        </view>
        <view :style="tabbarBoxStyle"></view>
      </scroll-view>

      <SkuDetailsCard ref="popupComponent" :goodsinfo="goods" :discount="0"></SkuDetailsCard>
    </qh-tabbar-page-view>
  </view>
</template>

<script>
const app = getApp().globalData;
import qhScrollMixin from "@/components/qh-scroll-view/mixins.js";
import SkuDetailsCard from "@/components/skuDetails/skuDetails.vue";

export default {
  components: {
    SkuDetailsCard,
  },
  mixins: [qhScrollMixin], // 使用mixin
  props: {
    bottomNavigation: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      themeList: [
        { src: "https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-04-27/680ddea2c6d575764.png" },
        { src: "https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-04-27/680ddea2c6d575764.png" },
        { src: "https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-04-27/680ddea2c6d575764.png" },
        { src: "https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-04-27/680ddea2c6d575764.png" },
        { src: "https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-04-27/680ddea2c6d575764.png" },
        { src: "https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-04-27/680ddea2c6d575764.png" },
      ],
      productTimer: null,
      allProducts: [],
      currentProductIndex: 0,
      classifyList: [],
      label_List: [
        {
          id: 11,
          title: "天然有机",
          name: "健康共享",
          label_title: "健康绿色，有机无污染",
          image_url: [
            {
              url: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/669e1a8637f929698.png",
            },
            {
              url: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/669e1ab22ea168894.png",
            },
          ],
        },
        {
          id: 12,
          title: "火锅烧烤",
          name: "元气满满",
          label_title: "火锅烧烤，打工人的加油站",
          image_url: [
            {
              url: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/669e1a8f6afe88947.png",
            },
            {
              url: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/669e1a8ba82ea8530.png",
            },
          ],
        },
        {
          id: 13,
          title: "无糖福音",
          name: "轻松降糖",
          label_title: "无糖主义，健康生活我先行",
          image_url: [
            {
              url: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/669e1f65f25563126.png",
            },
            {
              url: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/669e1c6985f026822.png",
            },
          ],
        },
        {
          id: 14,
          title: "健身轻食",
          name: "告别高热量",
          label_title: "享受美食，不用担心身材",
          image_url: [
            {
              url: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/669e1fb34d1946108.png",
            },
            {
              url: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/669e1fa57a4931877.png",
            },
          ],
        },
      ],
      tags: ["空气炸锅", "外酥里嫩", "藤椒风味"], // 标签数组,
      progress: 92,
      // goodsChecked: [],
      listLabel: [], //标签列表
      listPrice: [], //今日特价优惠
      // btnClass: true,
      // animations: [],
      canClick: true,
      // animationIndex: null,
      indexes: [],
      isRefresh: false,
      bannerList: [], //轮播图列表
      bannerListCeshi: [
        {
          image_url:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a2ed5eab952812.png",
        },
        {
          image_url:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a2ed5eab952812.png",
        },
      ], //轮播Mock
      navList: [], //分类导航列表
      actLabelId: "", //选中的标签id
      labelList: [], //标签列表
      goodsList: [], //商品列表
      goodsPage: 1, //商品分页页码
      goodsLimit: 10, //商品分页每页条数
      canLoad: true, //是否允许继续加载商品
      userType: 1, //用户身份
      sku: {}, //规格弹窗需要的参数信息
      goods: {}, //规格的商品信息
      isLoading: false, //是否正在加载商品
      // backgroundColor: '#E4FCC3', //背景色
      userPosition: "", //用户当前的位置
      longitude: "",
      latitude: "",
      isTop: true, // 用于标记是否在顶部
      opacity: 1,
      moreIndex: null,
      showMask: false,
      animating: false,
      isSticky: false, // 控制是否黏住顶部
      scrollProgress: 0, // 滚动进度
      classTwo: [],
      classSix: [],
      Product:[]
    };
  },
  watch: {
    showMask(val) {
      if (val) {
        uni.hideTabBar();
      } else {
        this.animating = true;
        setTimeout(() => {
          this.animating = false;
          uni.showTabBar();
        }, 300);
      }
    },
  },
  computed: {
    tabbarBoxStyle() {
      return 'height:' + (this.$store.bottomHeight + 110) + 'rpx'
    },

    isClassifyList() {
      return [
        ...this.classifyList,
        {
          id: "-1",
          image_id: "-1",
          image_url:
            "https://xzthealth-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/174046870267bd71de13d55.png",
          class_name: "关于我们",
          subheading: "",
        },
      ];
    },
    badgeText() {
      return this.$store.merShoppingGoodsList.length;
    },
    footerStyle() {
      let h = this.$store.bottomHeight + 110;
      return (
        "height:" + h + "rpx;padding-bottom:" + this.$store.bottomHeight + "rpx"
      );
    },
    skuBoxStyle() {
      return "margin-bottom:" + (this.$store.bottomHeight + 110) + "rpx";
    },
    showIntegral() {
      return (
        this.$store.integral_arrive_cash == 1 &&
        this.$store.marketing_methods == 2
      );
    },
  },
  beforeDestroy() {
    uni.showTabBar();
    // 清除产品轮播定时器
    if (this.productTimer) {
      clearInterval(this.productTimer);
    }
  },
  methods: {
    beforeDestroy() {
  // 清除已有的代码
  uni.showTabBar();
  
  // 清除产品轮换定时器
  if (this.productTimer) {
    clearInterval(this.productTimer);
    this.productTimer = null;
  }
},
    handleScroll(e) {
      const scrollTop = e.detail.scrollTop;
      this.isSticky = scrollTop > 50;
      this.isTop = scrollTop <= 100;
      // 计算滚动进度
      this.scrollProgress = Math.min(scrollTop / 200, 1);
    },
    async handleScrollToLower() {
      if (this.isLoading || !this.canLoad) return;

      // 显示加载提示
      uni.showLoading({
        title: "加载中...",
      });

      try {
        await this.getGoodsList();
      } finally {
        uni.hideLoading();
      }
    },

    closeMask() {
      this.showMask = false;
    },
    toNewYearSpecial() {
      uni.navigateTo({
        url: "/pages/mer/tabbar/new_year_special/new_year_special",
      });
    },
    handlerShopping() {
      uni.navigateTo({
        url: "/pages/mer/tabbar/new_year_special/new_year_special",
      });
      // uni.navigateTo({
      // 	url: '/pages/mer/tabbar/specialDetails/obj_details'
      // });
      //  uni.navigateTo({
      // 	url: '/pages/mer/tabbar/specialDetails/gift_box_details'
      // });

      // uni.navigateTo({
      // 	url: '/pages/mer/tabbar/specialDetails/moeny_details'
      // });
      // uni.navigateTo({
      // 	url: '/pages/mer/tabbar/specialDetails/brand_details'
      // });
      // uni.navigateTo({
      // 	url: '/pages/mer/tabbar/specialDetails/log_details'
      // });
    },

    toCoupon(e) {
      uni.navigateTo({
        url: "/pages/mine/mycoupon/mycoupon",
      });
    },

    generateSKU(val) {
      if (val.attribute_state == 2) {
        //SKU的
        this.$refs.popupComponent.handlerApply();

        val.skuDetailList.forEach((item) => {
          const goodsNum = parseInt(item.goods_num);
          item.disabled = goodsNum <= 0;
        });
        this.goods = val;
      }
    },
    //更新全局购物车
    updateStoreCar() {
      let goodsList = [];
      this.goodsList.forEach((item) => {
        goodsList.push({
          id: item.id,
          goods_id: item.goods_id,
          sku_id: item.sku_id,
          num: item.num,
        });
      });
      this.$store.merShoppingGoodsList = goodsList;
    },

    closeSku() {
      if (this.goodsList.length) {
        let obj = {
          ...this.goodsList[this.changeSkuIndex],
          // sku_id_list: data.sku_id_list,
          // sku_id: data.sku_id,
          // sku_name: data.sku_name,
          // online_price: data.online_price,
          // shop_mem_price: data.shop_mem_price,
          // plus_price: data.plus_price,
          // path: data.image,
        };
        console.log(obj, "1232132132131231");
        //查找购物车中是否含有相同规格的商品
        let index = this.goodsList.findIndex(
          (item) =>
            item.id != obj.id &&
            item.goods_id == obj.goods_id &&
            (!item.sku_id || item.sku_id == obj.sku_id)
        );
        if (index >= 0) {
          //合并购物车
          let oldItem = {
            ...this.goodsList[index],
            num: toDecimal(this.goodsList[index].num * 1 + obj.num),
          };
          this.$set(this.goodsList, index, oldItem);
          this.goodsList.splice(this.changeSkuIndex, 1);
          this.updateStoreCar();
        } else {
          this.$set(this.goodsList, this.changeSkuIndex, obj);
        }
        this.$forceUpdate();
      }
    },

    handlerMore() {
      uni.navigateTo({
        url: `/pages/mer/tabbar/categoryLabels/categoryLabels?&index=${-1}&label_id=${this.moreIndex
          }`,
      });
    },

    handlerAlert() { },
    //监听他的高度
    onScroll(event) {
      const scrollTop = event.detail.scrollTop;
      this.opacity = Math.max(1 - scrollTop / 100, 0);

      if (scrollTop < 50) this.opacity = 1;
      // console.log(this.opacity  , 'this.opacity')
    },
    //获取地图位置
    getLocal() {
      let obj = {};
      if (this.longitude && this.latitude) {
        obj = {
          longitude: this.longitude,
          latitude: this.latitude,
        };
      }
      uni.chooseLocation({
        ...obj,
        success: (res) => {
          console.log(res);
          uni.setStorageSync("userPositionInfo", res);
          this.userPosition = res.name;
          this.longitude = res.longitude;
          this.latitude = res.latitude;
        },
      });
    },

    //今日钜惠
    todayCheap() {
      // console.log('进来了吗')
      // 	uni.navigateTo({
      // 		url: '/pages/mine/gift_home/gift_home'
      // 	})
      // let  id = 1
      //   uni.navigateTo({
      // 		url: '/pages/mine/gift_purchase/gift_purchase?id=' + id + '&store_id=' + this.$root.store_id,
      // 	})

      let title = "今日钜惠";
      uni.navigateTo({
        url: `/pages/mer/tabbar/discount/discount?name=${title}&type=1`,
      });
    },
    // 领券
    handlerCoupon() {
      uni.navigateTo({
        url: "/pages/mer/tabbar/coupon/coupon?genre=" + 1,
      });
    },

    getDataList() {
      this.$refs.WaterfallRef.upDate();
    },

    async onShows() {
      console.log("进来了吗吗？");
      this.reloadData();
      const position = await this.$mutations.getLocation();
      if (position) {
        this.userPosition = position.name;
        this.longitude = position.longitude;
        this.latitude = position.latitude;
      }

      uni.setNavigationBarColor({
        // #ifdef MP-WEIXIN
        frontColor: this.$store.primaryBgTextColor,
        // #endif
        backgroundColor: this.$store.primaryBgColor,
      });
    },

    //刷新数据
    async reloadData() {
      await this.getProduct()
      await this.getGoodsList();
      await this.getBannerList();
      await this.getNavList();
      // await this.getLabelList();
      await this.getPreferential();
      await this.getLabel();
      if (this.isRefresh) {
        this.isRefresh = false;
        // uni.showToast({
        //      title: '刷新成功',
        //      duration: 800,
        // })
      }
    },
    //跳转到制定分类下的商品
    toGoodsList(item, indexOf, indexStatus) {
      let index = null;
      let id = null;
      indexStatus === "2" ? (index = item.indexId) : (index = indexOf);

      indexStatus === "更多" ? (id = item[0].id) : (id = item.id);

      console.log(item, index, "item,label_type");

      uni.navigateTo({
        url: `/pages/mer/tabbar/categoryLabels/categoryLabels?&index=${index}&label_id=${id}`,
      });
    },
    //今日优惠
    async getPreferential() {
      const res = await this.$request(
        "SmallProgramApi/ShiFu/getHomePageDiscountGoods",
        { store_id: this.$store.mallStoreId, page: 1, limit: 4 }
      );
      let listPrice = res.data.map((item) => {
        let num_discount = parseFloat(item.discount);
        let num_online_price = parseFloat(item.online_price);
        let specialOffer = (num_discount * num_online_price).toFixed(2);
        return {
          ...item,
          specialOffer: specialOffer,
        };
      });

      this.listPrice = listPrice;
      console.log(listPrice, "res");
    },

    // 获取标签数据
    async getLabel() {
      const result = await this.$request(
        "SmallProgramApi/ShiFu/getHomePageGoodLabel",
        { store_id: this.$store.mallStoreId }
      );

      if (result.data) {
        // this.listLabel = result.data;
        // let subtitle = [
        //   "#5BBE68",
        //   "#D37240",
        //   "#5A7ABE",
        //   "#E79B1D",
        //   "#C18C57",
        //   "#BF7156",
        // ]; //副标题颜色
        // this.listLabel.map((item, index) => {
        //   item["colorBack"] = subtitle[index];
        // });

        // this.listLabel = result.data;
        let subtitle = [
          "#5BBE68",
          "#D37240",
          "#5A7ABE",
          "#E79B1D",
          "#C18C57",
          "#BF7156",
        ]; //副标题颜色
        this.label_List.map((item, index) => {
          item["colorBack"] = subtitle[index];
        });
        console.log(
          this.label_List,
          "label_Listlabel_Listlabel_Listlabel_Listlabel_List"
        );
      }
    },

    async getProduct() {
      // 如果已经存在定时器，先清除
      if (this.productTimer) {
        clearInterval(this.productTimer);
      }
      
      const { status, data } = await this.$request(
        "SmallProgramApi/ShiFu/getLabelGoodList",
        { page: 1,
          limit: 10,
          store_id: this.$store.mallStoreId, 
          merchant_id: 1, 
          label_id:37
        }
      );
      
      // 保存完整的产品数据
      this.allProducts = data;
      
      // 初始显示前三个产品
      this.Product = data.slice(0, 3);
      
      // 当前产品起始索引
      this.currentProductIndex = 0;
      
      // 设置定时器，每三秒更新一次产品
      this.productTimer = setInterval(() => {
        // 更新当前索引
        this.currentProductIndex = (this.currentProductIndex + 3) % Math.max(1, this.allProducts.length - 2);
        
        // 更新显示的产品
        this.Product = this.allProducts.slice(this.currentProductIndex, this.currentProductIndex + 3);
      }, 3000);
    },



    //获取分类导航列表
    async getNavList() {
      const { status, data } = await this.$request(
        "SmallProgramApi/Goods/getGoodsClass_v3",
        { pageSource: 1, store_id: this.$store.mallStoreId, pid_class_id: 899 }
      );


      const imageUrl = [  //背景图片
        "https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-04-28/680f24a4483b46820.png",
        "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/174589431668103bac02d9c.png",
        "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1745891837681031fdd8b43.png",
        "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17458918716810321f3447d.png",
        "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17458919016810323d64e22.png",
        "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17458919376810326128b4f.png",
        "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1745892027681032bbdfc9d.png",
        "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1745892055681032d7a380d.png",
      ]

      data.map((item, index) => {
        item.background_image_url = imageUrl[index]
      })

      this.classTwo = data.slice(0, 2);
      this.classSix = data.slice(2, 8);

      console.log(this.classSix, "this.classSixclassSixclassSixclassSix");

      // this.navList = data;
      // this.moreIndex = this.navList[0][0].id;  
      if (status == 1) {
        let navList = [];
        if (data.length > 10) {
          let len = 0;
          let arr = [];
          for (let i in data) {
            arr.push(data[i]);
            len++;
            if (len >= 10) {
              navList.push([...arr]);
              len = 0;
              arr = [];
            }
          }
          arr.length && navList.push([...arr]);
        } else if (data.length) {
          navList = [data];
        }

        this.navList = navList;
        this.navList[1].forEach((item, index) => {
          item["indexId"] = 10 + index;
        });

        this.moreIndex = this.navList[0][0].id;
      }
    },

    //获取商品数据
    getGoodsList() {
      return new Promise(async (resolve) => {
        if (this.isLoading || !this.canLoad) return resolve(false);
        this.isLoading = true;
        const { status, data, message } = await this.$request(
          "SmallProgramApi/ShiFu/getHomePageGoods",
          {
            // id: this.actLabelId,
            page: this.goodsPage,
            limit: this.goodsLimit,
            store_id: this.$store.mallStoreId,
          }
        );
        if (status != 1)
          return (
            uni.showToast({
              title: message,
              icon: "none",
            }) && resolve(false)
          );

        if (this.goodsPage == 1) {
          this.goodsList = data;
        } else {
          this.goodsList.push.apply(this.goodsList, data);
        }
        this.goodsPage++;
        this.canLoad = data.length < this.goodsLimit ? false : true;

        this.goodsList.forEach((item) => {
          let matchedItem = this.$store.merShoppingGoodsList.find(
            (el) => el.goods_id === item.id
          );
          if (matchedItem) {
            item.num = matchedItem.num;
          } else {
            this.indexes = [];
            item.num = 0;
          }
        });

        this.$nextTick(() => {
          this.isLoading = false;
          resolve(true);
        });
      });
    },

    //获取轮播图
    async getBannerList() {
      const { status, data } = await this.$request(
        "SmallProgramApi/ShiFu/getHomePageBanner",
        { store_id: this.$store.mallStoreId }
      );
      if (status == 1) {
        // this.bannerList = data.map((res) => {
        //   if (res.link) {
        //     res.link = JSON.parse(res.link);
        //   }
        //   return res;
        // });
        // this.bannerList =
        //   this.bannerList.length < 2
        //     ? this.bannerListCeshi
        //     : this.bannerList.length;
        this.bannerList = data;
        console.log("轮播图啊", this.bannerList);
      }
    },
    //获取标签列表
    async getLabelList() {
      const { status, data } = await this.$request(
        "SmallProgramApi/BaseSet/getMerchantMallLabel",
        { store_id: this.$store.mallStoreId }
      );

      if (status == 1) {
        this.labelList = data;
        if (data.length) {
          this.$nextTick(() => {
            this.$refs.labelRef && (this.$refs.labelRef.marginLeft = 0);
            this.actLabelId = data[0].id;
            this.searchGoods();
          });
        }
        console.log(this.labelList, "获取标签列表");
      }
    },
    //查看商品详情
    toDetail(id) {
      uni.navigateTo({
        url: "/pages/mer/goods/details/details?id=" + id,
      });
    },

    //下拉刷新
    pullDownRefresh() {
      this.isRefresh = true;
      this.reloadData();
    },

    //搜索商品
    async searchGoods() {
      this.goodsPage = 1;
      this.canLoad = true;
      await this.getGoodsList();
    },

    //标签跳转
    // handlerClassIcon(link) {
    //   console.log(link.value , '12312321')
    //   this.toPath(link.value);
    // },

    handlerClass(val) {
      console.log('进来了吗')

      const encodedData = encodeURIComponent(JSON.stringify(val));
      uni.navigateTo({
        url: `/pages/mer/tabbar/home/components/define_template/components/class_ranking?category=${encodedData}`,
      });
    },

    //搜索商品
    toSearchGoods() {
      uni.navigateTo({
        url: "/pages/mer/goods/search/search?search=1",
      });
      // uni.navigateTo({
      //         url:'/pages/mer/tabbar/supplier/supplier_form',
      //     });

      //  uni.navigateTo({
      //         url:'/pages/order/SecureParcel/SecureParcel',
      //     });
    },

    toClassIcon(item) {
      // uni.navigateTo({
      //   url: "/pages/mer/goods/list/list?search=1",
      // });
      let itemList = '爆款专区';

      // item === "更多" ? (itemList = this.listLabel[0]) : (itemList = item);

      console.log(itemList, "itemList.name");
      uni.navigateTo({
        url: `/pages/mer/goods/list/list?name=${itemList}&type=1&id=${37}`,
      });
    },

    // // 展示plus会员价条件
    // showPlusPrice(item) {
    //   return app.showPlusPrice(item);
    // },
    // // 展示会员价条件
    // showVipPrice(item) {
    //   return app.showVipPrice(item);
    // },
    // // 展示普通价格
    // showOnlinePrice(item) {
    //   return app.showOnlinePrice(item);
    // },
  },
};
</script>

<style lang="less" scoped>
.super_body {
  background-color: #fff;
  margin: 0 20rpx 20rpx 20rpx;
  padding: 16rpx;
  border-radius: 0 0 16rpx 16rpx;
}

.sticky-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  transition: background-color 1s ease;
  /* 添加背景颜色的过渡效果 */
}

.sticky-header.sticky {
  position: fixed;
  // background-color: rgba(255, 255, 255, 0.9);
  background-color: #fff;

  /* 固定时背景色不透明 */
}

.xzt-icon-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  // background: linear-gradient( 179deg, #FFFFFF 0%, #FFE3B6 41%, #FFC058 100%);
  // background-color: #ffffff;
  // border-radius: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.xzt-activity {
  height: auto;
  /* 改为自适应高度 */
  margin: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 防止内容溢出 */
}

.xzt-gezi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  width: 100%;
}

.xzt-save-money {
  // height: 75%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -42%);
}

.xzt-pinpai {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -42%);
  height: 285rpx;
  // width: 670rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12rpx;

}

.trendMark-for {
  height: 278rpx;
  width: 214rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.trendMark-content {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 160rpx;
  width: 160rpx;
  //background: linear-gradient(180deg, #FDC870 0%, rgba(241, 241, 241, 0) 100%);
}

.trendMark-table {
  width: 80rpx;
  height: 76rpx;
  border-radius: 12rpx;
  position: absolute;
  right: 0;
  top: -1rpx;

}

.trendMark-jiantou {
  z-index: 1;
  position: absolute;
  left: 20rpx;
  top: 5rpx;
  font-size: 20rpx;
  width: 52rpx;
  height: 36rpx;
  color: #fff;
}

.trendMark-image {
  height: 140rpx;
  width: 140rpx;
}

.pinpai-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 可以添加其他样式，如字体大小、行高等 */
  font-size: 24rpx;
  line-height: 1.3;
  padding: 0 30rpx;
}

.pinpai-button {
  width: 85%;
  height: 40rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  
}

.xzt-icon-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.xzt-icon-image {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.xzt-icon-text {
  font-size: 12px;
  color: #333;
  text-align: center;
}

.xzt-icon-item:nth-child(n + 6) .xzt-icon-image {
  width: 60rpx;
  height: 60rpx;
}

.xzt-icon-text {
  font-size: 12px;
  color: #333;
  text-align: center;
}

.background-carousel-container {
  width: 100%;
  height: 620rpx;
  overflow: hidden;
}

.background-swiper-item {
  box-sizing: border-box;
}

.background-swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tag-container {
  margin-left: 16rpx;
  display: flex;
  flex-wrap: wrap;
  /* 如果标签过多，自动换行 */
}

.separator {
  width: 1rpx;
  height: 12rpx;
  /* 分割线的实际高度 */
  background: #9e9e9e;
  margin: 0 10rpx;
  /* 分割线的左右间距 */
  align-self: center;
  /* 使得元素自身居中 */
}

.today_dis {
  width: 100%;
  overflow-x: scroll;
}

.animationIcon {
  background: red;
  position: relative;
  top: 440rpx;
  left: 260rpx;
  z-index: 999;
}

.balt,
.baltRight {
  position: absolute;
  background: red;
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  z-index: 99999;
}

.inner,
.innerRight {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 99999;
}

.balt {
  animation: moveX 1s 1;
}

.inner {
  animation: moveY 1s cubic-bezier(1, -1, 1, 10) 1;
}

.baltRight {
  animation: moveXR 1s 1;
}

.innerRight {
  animation: moveYR 1s cubic-bezier(1, -1, 1, 10) 1;
}

@keyframes moveX {
  50% {
    transform: translateX(-190px);
  }

  100% {
    transform: translateX(-190px);
  }
}

@keyframes moveY {
  50% {
    transform: translateY(1000px);
  }

  100% {
    transform: translateY(1000px);
  }
}

@keyframes moveXR {
  50% {
    transform: translateX(100px);
  }

  100% {
    transform: translateX(100px);
  }
}

@keyframes moveYR {
  50% {
    transform: translateY(1000px);
  }

  100% {
    transform: translateY(1000px);
  }
}
</style>

<style lang="scss" scoped>
.mask-home-img-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.mask-home-img-content {
  position: relative;
  width: 80%;
  max-width: 640rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(1);
  opacity: 1;
  transition: all 0.3s ease;
}

.mask-home-img-fade-out {
  opacity: 0;
}

.mask-home-img-content-fade-out {
  opacity: 0;
  transform: scale(0.8);
}

.mask-home-img-promo {
  width: 100%;
  border-radius: 16rpx;
}

.mask-home-img-close-btn {
  position: relative;
  margin-top: 40rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  color: grey;
}
</style>

<style lang="less" scoped>
.tag-container {
  margin-left: 16rpx;
  display: flex;
  flex-wrap: wrap;
  /* 如果标签过多，自动换行 */
}

.separator {
  width: 1rpx;
  height: 12rpx;
  /* 分割线的实际高度 */
  background: #9e9e9e;
  margin: 0 10rpx;
  /* 分割线的左右间距 */
  align-self: center;
  /* 使得元素自身居中 */
}

.today_dis {
  width: 100%;
  overflow-x: scroll;
}

.animationIcon {
  background: red;
  position: relative;
  top: 440rpx;
  left: 260rpx;
  z-index: 999;
}

.balt,
.baltRight {
  position: absolute;
  background: red;
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  z-index: 99999;
}

.inner,
.innerRight {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 99999;
}

.balt {
  animation: moveX 1s 1;
}

.inner {
  animation: moveY 1s cubic-bezier(1, -1, 1, 10) 1;
}

.baltRight {
  animation: moveXR 1s 1;
}

.innerRight {
  animation: moveYR 1s cubic-bezier(1, -1, 1, 10) 1;
}

@keyframes moveX {
  50% {
    transform: translateX(-190px);
  }

  100% {
    transform: translateX(-190px);
  }
}

@keyframes moveY {
  50% {
    transform: translateY(1000px);
  }

  100% {
    transform: translateY(1000px);
  }
}

@keyframes moveXR {
  50% {
    transform: translateX(100px);
  }

  100% {
    transform: translateX(100px);
  }
}

@keyframes moveYR {
  50% {
    transform: translateY(1000px);
  }

  100% {
    transform: translateY(1000px);
  }
}
</style>

<style lang="less" scoped>
.show-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0px 16rpx;
}

.show-item {
  width: 46%;
  margin-bottom: 5px;
  padding: 5px;
  border: 1px solid #eee;
  border-radius: 5px;
  background-color: #fff;
}

.show-title {
  display: flex;
  align-items: center;
  margin-bottom: 5px;

  .show-title-head {
    font-size: 16px;
    font-weight: bold;
  }
}

.show-label {
  font-size: 22rpx;
  color: #fff;
  margin-left: 10px;

  height: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 4px;
}

.show-subtitle {
  font-size: 12px;
  // color: #999;
  margin-bottom: 10px;
}

.show-image-placeholder {
  display: flex;
  justify-content: space-between;
  width: 100%;
  // height: 70px;
  border-radius: 5px;
}

.show-inner-image {
  // width: 49%;
  width: 144rpx;
  height: 144rpx;
  border-radius: 5px;
  background-color: #fff;
}

.show-green .show-inner-image {
  // background-color: #8fd14f;
}

.show-red .show-inner-image {
  background-color: #ff6b6b;
}

.show-yellow .show-inner-image {
  background-color: #ffd166;
}

.show-orange .show-inner-image {
  background-color: #ff8c42;
}
</style>

<style lang="scss">
.subbox {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: space-evenly;
  float: right;
  margin-right: 16rpx;

  .subbox_one,
  .subbox_two {
    width: 320rpx;
    height: 144rpx;
  }

  .subbox_one {
    background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a6c47ed17c9964.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;

    .subbox_pos {
      position: absolute;
      left: 20rpx;
      top: 20rpx;
      display: flex;
      flex-direction: column;
    }

    .subbox_pos text:nth-child(1) {
      font-size: 40rpx;
      font-weight: bold;
    }

    .subbox_pos text:nth-child(2) {
      font-size: 24rpx;
      color: #d37240;
      margin-top: 10rpx;
    }
  }

  .subbox_two {
    background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a6c91763e61280.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;

    .subbox_pos {
      position: absolute;
      left: 20rpx;
      top: 20rpx;
      display: flex;
      flex-direction: column;
    }

    .subbox_pos text:nth-child(1) {
      font-size: 40rpx;
      font-weight: bold;
    }

    .subbox_pos text:nth-child(2) {
      font-size: 24rpx;
      color: #d37240;
      margin-top: 10rpx;
    }
  }
}

.shopping {
  margin: 16rpx;
  display: flex;
  justify-content: center;
  align-content: center;
}

.shopping_back {
  width: 716rpx;
  height: 328rpx;
  background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734056766675b9b3e857c0.png");
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 16rpx;
}

.prefix-home_center_class {
  padding: 16rpx;
}

.prefix-container {
  display: grid;
  grid-gap: 20rpx;
  grid-template-columns: repeat(5, 1fr);
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
}

.prefix-item {
  background-color: #fff;
  border-radius: 16rpx;
  text-align: center;
  /* Center the text */
}

.prefix-img {
  width: 100%;
  position: relative;
  padding-top: 100%;
  /* 1:1 aspect ratio */
}

.prefix-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16rpx;
}

.prefix-font_icon {
  font-size: 22rpx;
  margin-bottom: 16rpx;
}

.address_ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 24rpx;
  font-weight: normal;
}

/*** 已售空***/
.class-goods-img {
  position: absolute;
  top: 100rpx;
  left: 100rpx;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 28rpx;
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.class_button {
  all: unset;
  display: inline-block;
  background: var(--primary-color);
  border-radius: 50%;
  width: 46rpx;
  height: 48rpx;
  display: flex;
  align-content: center;
  justify-content: center;
  color: white;
  font-size: 40rpx;
  line-height: 41rpx;
  text-align: center;
  transition: transform 0.3s;
}

.goods-list-box {
  padding: 16rpx 16rpx;
  box-sizing: border-box;
  // margin-top: 28rpx;
  // column-count: 2;
  // column-gap: 16rpx;

  .goods-item {
    // break-inside: avoid;
    width: 355rpx;
    margin-bottom: 16rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    min-width: 40%;
    padding-bottom: 16rpx;
    border: 1rpx solid #f5f5f5;
    box-sizing: border-box;
    overflow: hidden;

    .goods-name {
      width: 316rpx;
      height: 76rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      /* 缩短并限制在一个确定的行数 */
      overflow: hidden;
      text-overflow: ellipsis;
      /* 文本溢出时添加省略号 */
      word-wrap: break-word;
      /* 单词过长会在词间换行 */
      white-space: normal;
      /* 允许正常换行 */
      font-size: 28rpx;
      font-family: ".PingFang SC-Regular", Arial, sans-serif;
      font-weight: bold;
      line-height: 36rpx;
      margin-left: 16rpx;
      margin-top: 16rpx;
    }

    .goods-price-box {
      font-size: 32rpx;
      line-height: 36rpx;
      margin-left: 20rpx;
    }

    .add-car-icon {
      color: var(--primary-color);
      font-size: 52rpx;
      margin-right: 20rpx;
      margin-bottom: 14rpx;
    }
  }
}

.content {
  flex-grow: 1;
  overflow: auto;
}

.tabbar {
  flex-shrink: 0;
}

.qh-tabbar-page-view {
  padding-bottom: 44px;
}

.fixed-header {
  // background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a1ce0154f25058.png");
  // background-color: #fff;
  // background-repeat: no-repeat;
  // background-size: cover;
  // background-position: center;
  // position: flex;
  // top: 0;
  // z-index: 9;
}

.header_img {
  height: calc(264rpx + var(--safe-area-top, 20px));
  width: 100%;
  background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a1ce0154f25058.png");
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: fixed;
  left: 0;
  top: 0;
  transition: opacity 1s;
}

.qh-scroll-view {
  height: 100vh;
  /*或者一个适当的值*/
}

.backGround {
  background-color: #eee;
}

.font_icon {
  font-size: 24rpx;
  font-family: ".PingFang SC-Regular", Arial, sans-serif;
  font-weight: bold;
}

.home_label {
  width: 716rpx;
  height: 512rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-left: 16rpx;
  margin-right: 16rpx;
  display: grid;
  //   grid-template-columns: repeat(4, 1fr);
  //   grid-template-rows: repeat(4, 1fr);
  grid-gap: 0px;

  .text_font_size {
    font-family: ".PingFang SC-Regular", Arial, sans-serif;
    font-weight: bold;
    color: #000;
    font-size: 28rpx;
  }

  .div0 {
    grid-area: 1 / 1 / 3 / 2;
    margin-left: 12rpx;
    margin-top: 12rpx;
    margin-right: 12rpx;

    img {
      all: unset;
      width: 220rpx;
      height: 316rpx;
    }

    text {
      position: absolute;
      top: 16rpx;
      left: 24rpx;
    }
  }

  .div1 {
    margin-top: 12rpx;
    margin-right: 12rpx;
    margin-bottom: 12rpx;
    grid-area: 1 / 2 / 2 / 4;

    img {
      all: unset;
      width: 456rpx;
      height: 152rpx;
    }
  }

  .div2 {
    margin-right: 12rpx;
    grid-area: 2 / 2 / 3 / 3;
  }

  .div3 {
    margin-right: 12rpx;

    grid-area: 2 / 3 / 3 / 4;
  }

  .div4 {
    margin-left: 12rpx;
    margin-right: 12rpx;
    grid-area: 3 / 1 / 4 / 1;

    text {
      position: absolute;
      top: 16rpx;
      left: 24rpx;
    }
  }

  .div5 {
    margin-right: 12rpx;
    grid-area: 3 / 2 / 4 / 2;
  }

  .div6 {
    margin-right: 12rpx;
    grid-area: 3 / 3 / 4 / 3;
  }

  .div4,
  .div5,
  .div6 {
    margin-top: 12rpx;
    margin-bottom: 12rpx;
  }

  .div2,
  .div3,
  .div4,
  .div5,
  .div6 {
    img {
      all: unset;
      width: 220rpx;
      height: 152rpx;
    }
  }

  .div0,
  .div1,
  .div2,
  .div3,
  .div4,
  .div5,
  .div6 {
    position: relative;
  }

  .textName {
    position: absolute;
    top: 16rpx;
    left: 16rpx;
  }
}

.home_today {
  display: flex;

  .today_left {
    border-radius: 16rpx;
    margin-left: 16rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;

    background: linear-gradient(to bottom, #fddeca, #fff9f5);
    width: 502rpx;
    height: 226rpx;

    .img_icon {
      margin: 6rpx 11rpx;

      image {
        width: 104rpx;
        height: 100rpx;
        border-radius: 16rpx;
      }

      .today_price {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 18rpx;
        background-color: red;
        color: #fff;
        font-size: 18rpx;
        width: 80rpx;
        height: 28rpx;
        margin-left: 12rpx;
        text-align: center;
      }
    }
  }

  .today_right {
    width: 204rpx;
    height: 226rpx;
    margin-bottom: 16rpx;
    border-radius: 16rpx;
    background: linear-gradient(to bottom, #fddeca, #fff9f5);
    position: relative;

    .img_icon {
      margin: 16rpx;

      image {
        width: 172rpx;
        height: 172rpx;
        margin-left: 10rpx;
      }

      .today_price {
        border-radius: 18rpx;
        background-color: #ff782a;
        color: #fff;
        text-align: center;
        position: absolute;
        bottom: 10rpx;
        right: 35rpx;
        width: 112rpx;
        height: 28rpx;
        font-size: 20rpx;
        font-family: ".PingFang SC-Regular", Arial, sans-serif;
        font-weight: bold;
      }
    }
  }
}

.home_center_calss {
  // height: 332rpx;
  // background: #fff;
  // border-radius: 16rpx;
  // margin-left: 16rpx;
  // margin-right: 16rpx;
  // margin-bottom: 16rpx;

  .class_icon {
    display: contents;
    width: 100%;

    .class_icon_img {
      width: 108rpx;
      height: 108rpx;
      text-align: center;
    }

    image {
      width: 108rpx;
      height: 108rpx;
    }
  }
}

.hot-sales:before {
  content: "";
  position: absolute;
  left: -20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 30rpx;
  background-color: #FFB73F;
  /* 热卖精选左侧的竖线颜色 */
}

.priority-recommend {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  border-radius: 36rpx 36rpx 0 0;
  background-color: #FDF8EE;
  position: relative;
  top: -20rpx;
  padding: 26rpx 26rpx 0px 26rpx;
  color: #FFB73F;
}

.home_class {
  background-color: #FDF8EE;

  // padding-top: 16rpx;
  // padding-top: 16rpx;
  .home_icon {
    // margin-left: 16rpx;
    // margin-right: 16rpx;
    // margin-bottom: 16rpx;

    width: 716rpx;
    height: 145rpx;
    background: #fff;
    // border-radius: 16rpx;
    display: flex;

    .min_cion {
      display: inline-block;
      width: 130rpx;
      height: 120rpx;
      text-align: center;
      margin-top: 20rpx;

      image {
        width: 64rpx;
        height: 64rpx;
      }
    }
  }
}

//轮播样式
.banner-box {
  background: #eee;
  padding-top: 8px;

  // padding-top: 120rpx;
  .banner-bg {
    position: absolute;
    width: 100%;
    // calc(var(--status-bar-height) + 470rpx )  只针对app-PLUS
    //背景颜色渐变效果
    // background-image: linear-gradient(red 50%,#FFF) ;
    // 过度效果
    transform: 0.5s;
  }

  .banner-swipper {
    width: 100%;
    height: 302rpx;

    .swiper-item {
      width: 100%;
      height: 100%;

      image {
        width: 716rpx;
        height: 302rpx;
        border-radius: 15rpx;
        object-fit: contain;
        /* 图片适应容器，保持宽高比 */
        box-sizing: border-box;
        /* 确保内边距不会改变容器的大小 */
      }
    }
  }
}

.title_font {
  margin-left: 24rpx;
  font-size: 40rpx;
  font-weight: 600;
}

.hide-ali-back {
  width: 80rpx;
  height: 72rpx;
}

.search-box {
  position: sticky;
  top: 0;
  // margin: 16rpx 24rpx;
  border: 1px solid #f5f5f5;

  /* #ifdef MP-WEIXIN */
  margin-left: 24rpx;
  /* #endif */
  /* #ifdef MP-ALIPAY */
  width: 400rpx;
  /* #endif */
  height: 66rpx;
  background-color: #ffffff;
  border-radius: 34rpx;
  padding-left: 10rpx;

  box-sizing: border-box;
  line-height: 32rpx;

  .search-icon {
    font-size: 28rpx;
    color: #999999;
  }

  .search-text {
    font-size: 28rpx;
    color: #999999;
    margin-left: 12rpx;
  }

  .search-button {
    // background-color: #93d934;
    color: #000;
    border-radius: 20px;
    height: 56rpx;
    width: 122rpx;
    line-height: 56rpx;
    margin-left: auto;
    text-align: center;
    font-size: 28rpx;
  }
}

.top-nav-box {
  color: #ffffff;
  background-color: var(--primary-color);
  padding: 0 24rpx 16rpx;

  .pisition-icon {
    font-size: 26rpx;
    color: #ffffff;
  }

  .user-position {
    font-size: 30rpx;
    line-height: 32rpx;
    max-width: 272rpx;
    margin: 0 16rpx 0 10rpx;
  }

  .pisition-right-icon {
    font-size: 18rpx;
  }

  .top-nav-right-icon {
    font-size: 44rpx;
  }

  .top-nav-right-text {
    font-size: 20rpx;
    line-height: 20rpx;
    margin-top: 10rpx;
  }

  .mar-l-38 {
    margin-left: 38rpx;
  }
}

.home-box {
  // border-radius: 20rpx 20rpx 0 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);

  .swiper-box {
    height: 272rpx;
    margin: 24rpx 24rpx 0;
    /* #ifdef MP-ALIPAY */
    width: calc(100% - 48rpx);
    /* #endif */
    box-sizing: border-box;

    .swiper-image {
      // display: block;
      width: 100%;
      height: 272rpx;
    }
  }

  .nav-box {
    margin-top: 26rpx;
    height: 352rpx;

    .nav-swiper-box {
      width: 730rpx;
      height: 100%;
    }

    .nav-item-box {
      width: 684rpx;
      margin: 0 auto;
    }

    .nav-item {
      width: 100rpx;
      margin-left: 46rpx;
      margin-bottom: 36rpx;

      &:nth-child(5n + 1) {
        margin-left: 0;
      }

      .nav-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }

      .nav-text {
        font-size: 24rpx;
        color: #333333;
        line-height: 24rpx;
        margin-top: 16rpx;
        text-align: center;
      }
    }
  }
}
</style>
